import React, { useEffect } from 'react';
/*
 * 全局布局组件 - Global Layout Component
 * 提供整个应用的基础布局结构，包含头部导航等公共元素
 */

import { Outlet } from 'umi';
import Header from '@/components/Header/header';
import { ThemeProvider } from '@/contexts/ThemeContext';
import { useUserId } from '@/hooks';

const Layout: React.FC = () => {
  // 🌟 全局检测：确保用户有 userId（登录用户或匿名用户）
  const userId = useUserId();

  useEffect(() => {
    if (userId) {
      console.log('✅ [全局检测] 用户ID已就绪:', userId);
    }
  }, [userId]);

  return (
    <ThemeProvider>
      <div style={{ backgroundColor: 'var(--bg-secondary)', minHeight: '100vh' }}>
        <Header />
        <main>
          <Outlet />
        </main>
      </div>
    </ThemeProvider>
  );
};

export default Layout;